
<template>
  <div>
    <el-header><top-bar></top-bar></el-header>

    <el-card class="box-card" style="width: 100%; height: 70px">
      <div
        style="width: 200px; height: 50px; margin-top: auto; margin-top: -20px"
      >
        {{ province }}{{ city }}{{ district }}
      </div>
      <div style="margin-top: -20px; margin-left: 600px">
        <span> 你好，{{ username }} </span>
      </div>
      <div style="margin-left: 1000px; margin-top: -30px">
        <el-row>
          <el-button type="warning" plain @click="toorder()"
            >我的订单</el-button
          >
        </el-row>
      </div>
    </el-card>

    <!-- 复选框父节点 -->
    <el-checkbox-group v-model="checkList">
      <!-- 复选框子节点1 -->
      <!-- <div style="text-align: left; padding: 10px 130px">
        <el-checkbox style="text-align: left" id="all-check" label="全选">
          全选 {{ "已选：" + checkList }}
        </el-checkbox>
      </div> -->

      <div v-for="(item, index) in tableData" :key="item.id">
        <el-card class="commodity-card">
          <!-- 复选框子节点2 -->
          <el-checkbox
            id="check"
            style="vertical-align: top; text-align: left"
            :label="item"
            @change="
              changeCheckStatus(index);
              checkChange(index);
            "
            >￥{{
              item.commodityCurrentPrice + item.specification.price
            }}</el-checkbox
          >
          <div id="image-card">
            <span class="demonstration"></span>
            <el-image
              :src="`${item.imgpath}`"
              fit="cover"
              style="height: 142px"
            ></el-image>
          </div>

          <div id="commodity-info">
            <span id="commodity-barnd">{{ item.brand }} </span>
            <span id="commodity-type">{{ item.shopType }} </span>
            <span id="commodity-name"> {{ item.commodityName }} </span>
            <span id="commodity-price">{{ item.commodityCurrentPrice }} </span>
            <span id="commodity-specification"
              >{{ item.specification.specificationsName }}
            </span>
            <el-divider></el-divider>
            <el-input-number
              @click="sumprice()"
              v-model="num[index]"
              @change="
                putShoppingCart(index, item.id);
                checkChange(index);
              "
              :min="1"
              :max="item.productStocks"
              label="描述文字"
            ></el-input-number>
          </div>
        </el-card>
      </div>

      <div id="zhifu" style="text-align: right; padding-right: 130px">
        <el-button
          v-model="allPrice"
          @click="toPay()"
          type="warning"
          style="margin-left: 20px"
          >{{ "(总计￥:" + allPrice + ")" }}立即支付</el-button
        >
      </div>
    </el-checkbox-group>

    <!-- 购买该商品的用户还购买了 -->
    <el-card style="display: flex">
      <span>购买该商品的用户还购买了：</span>
    </el-card>

    <div v-for="item in commodityArr" :key="item.id">
      <div class="block" style="display: flex; margin-left: 100px">
        <span class="demonstration"></span>
        <el-image :src="src" style="height: 210px"></el-image>
        <el-card>
          <span>{{ item.commodityName }}</span>
          <el-divider></el-divider>
          <span>￥{{ item.commodityCurrentPrice }}</span>
          <el-divider></el-divider>
          <el-button type="primary" @click="tishi()" plain
            >加入购物车</el-button
          >
        </el-card>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import TopBar from "../TopBar/TopBar.vue";
import {
  getCommodityAndSales,
  getShoppingCartRecordAndCommodityMsgByUserId,
  getShoppingCart,
  changeShoppingCart,
} from "../../../api/Commodity";
export default {
  name: "page",
  components: {
    TopBar,
  },
  data() {
    return {
      res: "",
      province: "",
      city: "",
      district: "",
      username: localStorage.getItem("userName"),
      src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",

      // 计数器
      num: [],

      // 复选框选择状态
      checkStatus: [],

      // 商品信息
      isselect: "",
      number: "",
      tableData: [],
      money: "",
      comId: 0,
      userId: localStorage.getItem("userId"),
      otherUserId: [],
      newotherUserId: "",
      commodityIdArr: [],
      commodityArr: [],
      url: "",
      getNum: 0,
      //规格金额
      Specificationsmoney: 0,

      // 多选框选中
      checkList: [],

      // 所有购物车商品中的总价
      allPrice: 0,

      //每个购物车中的商品的总价
      everyPrice: [],
    };
  },
  mounted() {
    var data = { key: "EDDBZ-BYXL3-WSF3C-3RWXI-NCV46-ZEBZ4" };
    var url = "https://apis.map.qq.com/ws/location/v1/ip";
    data.output = "jsonp";
    this.$jsonp(url, data)
      .then((res) => {
        this.province = res.result.ad_info.province;
        this.city = res.result.ad_info.city;
        this.district = res.result.ad_info.district;
      })
      .catch((err) => {
        console.log(err);
      });

    this.fetch();
    this.oo();
    this.handleToRouter();
    this.sumprice();
  },
  methods: {
    sumprice() {
      console.log("hello");
    },

    

    // 复选框选中事件
    changeCheckStatus(getIndex) {
      // 如果未选中则选中，否则取消选中
      if (this.checkStatus[getIndex] === false) {
        this.checkStatus[getIndex] = true;
      } else {
        this.checkStatus[getIndex] = false;
      }
    },

    // 根据选择的商品计算总价
    checkChange(getIndex) {

      // 把总价清零
      this.allPrice = 0;

      // 计算总价
      var summoney =
        (this.tableData[getIndex].commodityCurrentPrice +
          this.tableData[getIndex].specification.price) *
        this.num[getIndex];

      // 如果选中了这个商品 则把这个商品的总价传进everyPrice数组
      if (this.checkStatus[getIndex] === true) {
        this.everyPrice[getIndex] = summoney;
      } else {
        this.everyPrice[getIndex] = 0;
      }

      // 遍历每个商品的总价 并把它们相加计算总价
      this.everyPrice.forEach((item) => {
        this.allPrice += item;
      });

     
    },

    //修改数量
    putShoppingCart(index, id) {
      this.tableData.map((val) => {
        if (val.id == id) {
          // console.log(id);

          // console.log(val.specification.id);
          // console.log(val.shoppingId);
          changeShoppingCart(val.shoppingId, {
            commodityId: id,
            userId: parseInt(this.userId),
            specificationsId: val.specification.id,
            commdityNumber: this.num[index],
          })
            .then((data) => {
              console.log(data);

              // console.log(data.data.data.commdityNumber);
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },

    checkAll() {},
    handleToRouter() {},

    //我的订单
    toorder() {
      this.$router.push({ path: "/order" });
    },

    //支付
    toPay() {
      if (this.allPrice === 0) {
        this.$message.error("请选择要支付的商品");
      } else {
        this.$router.push({ path: "/GenerateOrderAndPay" });
        console.log(this.comId);
        //监听路由并传值
        this.$router.push({
          path: "/GenerateOrderAndPay", //跳转的路径
          query: {
            id: this.allPrice,
            commodityId: this.comId,
          },
        });
      }
    },

    // 加入购物车提示
    tishi() {
      this.$message("商品已加入购物车");
    },

    fetch() {
      //我的购物车
      getShoppingCartRecordAndCommodityMsgByUserId(parseInt(this.userId))
        .then((data) => {
          var res = data.data.data;
          res.map((val) => {
            this.tableData.push(val);
            // console.log(this.tableData);
          });

          res.map((item) => {
            // console.log(item.imgpath);
            var line = item.imgpath.indexOf("files") + 6;
            item.imgpath = "http://localhost:5000/" + item.imgpath.slice(line);
            // console.log(item.imgpath);
            //获取金额
            this.money = item.commodityCurrentPrice;
            // console.log(this.money);
            //获取规格金额
            // console.log(item.specification.price);
            // console.log(this.price);
            //总价钱
            this.price = item.commodityCurrentPrice + item.specification.price;
          });
          this.url = res[0].imgpath;
          this.tableData = res;
          // this.getIndex();
          // console.log(res);

          // var a=23;
          // console.log(a);
          // this.$router.push({
          //   path: "/GenerateOrderAndPay",
          //   query: {
          //     name: a,
          //   },
          // });
          this.tableData.forEach(() => {
            this.checkStatus.push(false);
            this.everyPrice.push(0);
          });
        })
        .catch((err) => {
          console.log(err);
        });

      //查询购物车
      getShoppingCart()
        .then((data) => {
          var res = data.data.data;
          res.map((val) => {
            if (val.userId == parseInt(this.userId)) {
              this.num.push(val.commdityNumber);
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });

      //购物车及销售表
      getCommodityAndSales(parseInt(this.userId))
        .then((data) => {
          var res = data.data.data;
          // console.log(res);
          res.map((val) => {
            this.otherUserId.push(val.otherUserId);
            this.commodityIdArr.push(val.commodityId);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    oo() {
      // console.log(this.otherUserId);
      // console.log(this.commodityIdArr);
      getCommodityAndSales(4)
        .then((data) => {
          var res = data.data.data;
          res.map((val) => {
            this.commodityArr.push(val);
            console.log(this.commodityIdArr);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
}

.el-header,
.el-footer {
  background-color: #333;
  color: #333;
  text-align: center;
  line-height: 40px;
}
.el-header {
  height: 40px !important;
  padding: 0 120px;
}

.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  min-height: 750px;
  height: 100%;
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
.commodity-card {
  width: 80%;
  min-height: 200px;
  margin: 15px auto;
}

/* 复选框 */
#check {
  width: 100%;
}

/* 购物车图片卡片 */
#image-card {
  float: left;
  width: 150px;
  height: 150px;
}

#commodity-info {
  float: left;
  width: 80%;
  min-height: 150px;
  font-size: 20px;
}

.el-checkbox__label:after {
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
</style>